<template>
    <div class="actionSheet" @click="hideAction">
        <!--下面弹出的选择菜单 -->
        <ul class="bottomMenuList" :class="{'show':isShow==true}">
            <li  @click="itemClick(index)" v-for="(item,index) in actionSheetItemList" :key="index"  :class="[index!=actionSheetItemList.length-1]?'borderBottom':null">{{item}}</li>
            <li>取消</li>
        </ul>
    </div>
</template>

<script>
import {mapActions,mapGetters} from "vuex";
export default {
    name:"actionSheet",
    data(){
        return {
            isShow:false
        }
    },
    mounted(){
        setTimeout(() => {
            this.isShow=true;
        }, 100);
    },
    computed:{
        ...mapGetters(["actionSheetItemList","actionSheetCallBack"])
    },
    methods:{
        ...mapActions(["hideActionSheet"]),
        hideAction(){
            this.hideActionSheet();
        },
        itemClick(index){
            this.actionSheetCallBack(index);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/comm.scss";
.actionSheet{
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    .bottomMenuList{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        color: #000000;
        z-index: 9999;
        background-color: #efeff4;
        transform: translateY(100%);
        transition: all 0.2s linear;
        &.show{
            transform: translateY(0);
        }
        >li{
            height:.8rem;
            @include flexbox();
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            &:last-child{
                margin-top: .1rem;
            }
            &.borderBottom{
                border-bottom: 1px solid lightgray;
            }
        }
        
    }
}
</style>
